<template>
	<view class="c_sbu">
		<view class="title_text">Deposito</view>
		<view class="title_h">
			<view class="t_name">Voltar</view>
			<view class="back" @click="back">
				<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
			</view>
		</view>
		<view class="v_tip">Copie o codigo “copia e cola” abaixo para realizar o pagemento</view>
		<view class="v_card">
			<view class="money_text">R$ 90,00</view>
			<up-input placeholder="00020101021226840014br.gov.bcb.pix2562qr" border="none" v-model="code_value" :customStyle="inputStyle" color="#fff"></up-input>
			<view class="btn">
				<up-button type="primary" color="#0ACF83" :plain="true" v-if="false" :customStyle="btnStyle" text='Copiar Código "copia e cola"'></up-button>
				<up-button type="primary" color="#0ACF83" v-else :customStyle="btnStyle2" text="Código copiado!"></up-button>
			</view>
		</view>
		<view class="v_content">
			<view class="time_title">O tempo para você pagar acaba em:</view>
			<view class="times">
				<up-count-down :time="5 * 60 * 1000 - 1" format="mm:ss" :autoStart="false" @change="onChange" ref="countDown">
					<view class="time">{{ timeData.minutes }}:{{ timeData.seconds }}</view>
				</up-count-down>
			</view>
			<view class="lines">
				<up-line-progress :percentage="cur_time" activeColor="#2FD080" inactiveColor="#242632" :showText="false"></up-line-progress>
			</view>

			<view class="qrcode_btn">
				<up-button type="primary" color="#454757" :customStyle="btnStyle3" text="Exibir  QR Code"></up-button>
			</view>
			<view class="qrcode">
				<image class="qrcode_img" src="../../../static/logo.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch,inject } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const btnStyle = {
	height: '78rpx',
	borderRadius: '20rpx',
	fontSize: '32rpx',
	color: '#2FD080',
	fontWeight: 700,
	background: '#454757'
};
const btnStyle2 = {
	height: '78rpx',
	borderRadius: '20rpx',
	fontSize: '32rpx',
	color: '#fff',
	fontWeight: 700,
	background: '#2FD080'
};
const btnStyle3 = {
	height: '54rpx',
	borderRadius: '12rpx',
	fontSize: '32rpx',
	color: '#fff',
	fontWeight: 700,
	background: '#454757'
};
const inputStyle = {
	height: '78rpx',
	borderRadius: '12rpx',
	background: '#17181D',
	padding: '0 20rpx'
};
const code_value = ref('');
const timeData = ref({});
const countDown = ref(null);
const cur_time=ref(100)

const setInde=inject('setInde')

onMounted(() => {
	setTimeout(() => {
		countDown.value.start();
		// pause 暂停
		// reset 重置
	}, 200);
});

const back=()=>{
	setInde()
}

const onChange = (e) => {
	timeData.value = e;
	cur_time.value=(e.minutes*60+e.seconds)/3
};
</script>

<style lang="scss" scoped>
.c_sbu {
	width: 100vw;
	letter-spacing: 0.4rpx;
	padding-bottom: 52rpx;
	box-sizing: border-box;
	.title_text {
		height: 56rpx;
		margin-top: 42rpx;
		font-size: 36rpx;
		line-height: 56rpx;
		font-weight: 700;
		padding: 0 32rpx;
		box-sizing: border-box;
	}
	.title_h {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 40rpx;
		position: relative;
		width: 100%;
		border-bottom: 2rpx solid rgba(196, 196, 196, 0.1);
		padding: 0 32rpx;
		box-sizing: border-box;
		.back {
			position: absolute;
			left: 32rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.v_tip {
		padding: 0 86rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #7e84a0;
		margin-top: 40rpx;
	}
	.v_card {
		margin: 46rpx 32rpx 0;
		box-sizing: border-box;
		background-color: #454757;
		padding: 40rpx;
		border-radius: 12rpx;
		.money_text {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 40rpx;
			margin-bottom: 32rpx;
		}
		.btn {
			margin-top: 32rpx;
			margin-bottom: 40rpx;
		}
	}
	.v_content {
		margin-top: 40rpx;
		padding: 0 32rpx;
		.time_title {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #fb923c;
			text-align: center;
			margin-bottom: 40rpx;
		}
		.times {
			display: flex;
			align-items: center;
			justify-content: center;
			.time {
				font-size: 64rpx;
				font-weight: 700;
			}
		}
		.lines {
			margin-top: 30rpx;
		}
		.qrcode_btn{
			margin-top: 40rpx;
		}
		.qrcode{
			margin-top: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.qrcode_img{
				width: 300rpx;
				height: 300rpx;
				display: block;
				border-radius: 24rpx;
			}
		}
	}
}
</style>
